import { forwardRef, useImperativeHandle, useState } from "react"

import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogActions from '@mui/material/DialogActions';
import Button from '@mui/material/Button';
import { useNavigate } from "react-router-dom";
import { getRoomId, getRoomLocation, getRoomNumber } from "../../../utils/localStorage/room";
import { getSeatId ,getSeatSeatId} from "../../../utils/localStorage/seat";
import { getUserInfo } from "../../../utils/localStorage/userInfo";
import { reserveSeatAPI } from "../../../apis/reserve";
const ConfirmDialog = forwardRef((props, ref) => {
    const navigate = useNavigate()

    const [open, setOpen] = useState(false);

    useImperativeHandle(ref, () => ({
        openDialog: () => {
            handleClickOpen()
        },
        closeDialog: () => {
            handleClose()
        }
    }))

    const handleClickOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    };

    // 选择座位进行预约
    const reserveSeat = async() => {
        let studentInfo = getUserInfo()
        let { id  } = studentInfo
        let info = {
            studentId:parseInt(id),
            roomsId:parseInt(getRoomId()),
            seatId:parseInt(getSeatId())
        }
        let res = await  reserveSeatAPI(info)
        console.log('预约座位',res);
        // if (res.code == 0) {
        //     return
        // }
        navigate('/reserveresult',{replace:true})
    }

    return (
        <>
            <Dialog
                open={open}
                onClose={handleClose}
                aria-labelledby="alert-dialog-title"
                aria-describedby="alert-dialog-description"
            >
                <DialogTitle id="alert-dialog-title">
                    {`是否选择${getRoomLocation()}${getRoomNumber()}教室${getSeatSeatId()}号座?`}
                </DialogTitle>
                <DialogContent>
                    <DialogContentText id="alert-dialog-description">
                        预约后，您仍可以取消此座位选择预约其他座位。
                    </DialogContentText>
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleClose}>再想想</Button>
                    <Button onClick={reserveSeat} autoFocus >
                        确定
                    </Button>
                </DialogActions>
            </Dialog>
        </>
    )
})

export default ConfirmDialog